import React, { useEffect } from 'react';
import clsx from 'clsx';
import { parse } from 'query-string';
import { makeStyles } from '@material-ui/core/styles';
import { Box, List, ListItem, Grid, Typography } from '@material-ui/core';
import { SectionAlternate, CardBase } from 'components/organisms';
import { Hero, General, Security, Notifications, Subscriptions } from './components';
import { callGetNewsApi } from 'utils/networking';
import { useDispatch } from 'react-redux';
import { setProfile } from 'redux/actions/AuthActions';

const useStyles = makeStyles(theme => ({
  root: {
    height: '100%',
    width: '100%',
  },
  section: {
    '& .section-alternate__content': {
      paddingTop: 0,
      marginTop: theme.spacing(-5),
      position: 'relative',
      zIndex: 1,
    },
    '& .card-base__content': {
      padding: theme.spacing(2),
      [theme.breakpoints.up('md')]: {
        padding: theme.spacing(3),
      },
    },
  },
  menu: {
    height: 'auto',
  },
  list: {
    display: 'inline-flex',
    overflow: 'auto',
    flexWrap: 'nowrap',
    width: '100%',
    [theme.breakpoints.up('md')]: {
      display: 'flex',
      flexDirection: 'column',
      marginRight: theme.spacing(-3),
      marginLeft: theme.spacing(-3),
    },
  },
  listItem: {
    marginRight: theme.spacing(2),
    flex: 0,
    [theme.breakpoints.up('md')]: {
      paddingRight: theme.spacing(3),
      paddingLeft: theme.spacing(3),
      borderLeft: '2px solid transparent',
    },
  },
  listItemActive: {
    [theme.breakpoints.up('md')]: {
      borderLeft: `2px solid ${theme.palette.primary.dark}`,
    },
    '& .menu__item': {
      color: theme.palette.text.primary,
    },
  },
}));

const subPages = [
  {
    id: 'general',
    href: '/account/?pid=general',
    title: 'General',
  },
  {
    id: 'security',
    href: '/account/?pid=security',
    title: 'Security',
  },
  {
    id: 'subscriptions',
    href: '/account/?pid=subscriptions',
    title: 'Subscriptions',
  },
];

const TabPanel = props => {
  const { children, value, index, ...other } = props;

  return (
    <Box component="div" hidden={value !== index} {...other}>
      {value === index && children}
    </Box>
  );
};

const Account = (props = {}) => {
  const classes = useStyles();
  const dispatch = useDispatch();
  let pageId = parse(window.location.search).pid || 'general';

  useEffect(() => {
    console.log('pageId', pageId)
    if (pageId == 'my_playlists') {
      callGetNewsApi('user/verify_token', dispatch, (data) => {
        if (data && data.id) {
          dispatch(setProfile(data));

          const token = localStorage.getItem('token');
          window.location.href = `${process.env.REACT_APP_SERVER_URL}api/playlist/index/${token}`;
        }
      })
    }
  }, [])

  return (
    pageId == 'my_playlists' ? (
      <div className={classes.root}></div>
    ) : (
      <div className={classes.root}>
        <Hero />
        <SectionAlternate className={classes.section}>
          <Grid container spacing={4}>
            <Grid item xs={12} md={3}>
              <CardBase withShadow align="left" className={classes.menu}>
                <List disablePadding className={classes.list} style={{ overflow: "hidden"}}>
                  {subPages.map((item, index) => (
                    <ListItem
                      key={index}
                      component={'a'}
                      href={item.href}
                      className={clsx(
                        classes.listItem,
                        pageId === item.id ? classes.listItemActive : {},
                      )}
                      disableGutters
                    >
                      <Typography
                        variant="subtitle1"
                        noWrap
                        color="textSecondary"
                        className="menu__item"
                      >
                        {item.title}
                      </Typography>
                    </ListItem>
                  ))}
                </List>
              </CardBase>
            </Grid>
            <Grid item xs={12} md={9}>
              <CardBase withShadow align="left">
                <TabPanel value={pageId} index={'general'}>
                  <General />
                </TabPanel>
                <TabPanel value={pageId} index={'security'}>
                  <Security />
                </TabPanel>
                <TabPanel value={pageId} index={'subscriptions'}>
                  <Subscriptions />
                </TabPanel>
              </CardBase>
            </Grid>
          </Grid>
        </SectionAlternate>
      </div>
    )
  );
};

export default Account;
